<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="application-name" content="移动版">
    <title>报名信息</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../h5js/zepto.min.js"></script>
    <script src="../h5js/touch.js"></script>
    <script src="../h5js/introduce.js"></script>
</head>
<body>
<header>
    <div class="head">
        <a href="javascript:void(0);" onclick="history.go(-1)"></a>
        <span>报名信息</span>
		<img src="../img/logo.png" alt="" id="xuanzhuan">
    </div>
</header>
    <section>
        <div class="song-name">
            <h3>参赛曲名</h3>
			 <audio src="../img/001.mp3" id="audio" controls="controls" class="audio-hidden">
                你的浏览器不支持
            </audio>
            <p class="audio-img"><span>歌曲名称</span>
            <img src="../img/pause.png" alt="" onclick="clickA()" id="img-play">
            </p>
        </div>
        <form action="verify.html" class="text-list">
		 <ul>
            <li><b>完善参赛信息</b></li>
            <li><i></i><input type="text" placeholder="我的昵称/真名" id="nickname"></li>
            <li><span  style="color: #f00" id="nickname-text"></span></li>
            <li><i></i><input type="radio" class="radio" name="matEntryInfo" checked>我是女神<input type="radio" class="radio last" name="matEntryInfo">我是男神</li>
            <li><span style="color: #f00" id="single-elect"></span></li>
            <li><i></i><input type="text" placeholder="我的手机号码"  id="my-num"></li>
            <li><span  style="color: #f00" id="apply-num"></span></li>
            <li><i></i><input type="text" placeholder="我的比赛宣言" id="manifesto"></li>
            <li><span style="color: #f00" id="manifesto-text"></span></li>
            <li><i></i></li>
        </ul>
            <!--<div class="upload-btn-box" >-->
                <!--<input id="pageUpload" type="file" name="questionPic" class="upload-btn">-->
            <!--</div>-->
			<div class="menus">
            <div id="preview" class="upload-btn-box">
                <input type="file"  name="imgPhoto"  id="imgPhoto" onchange="previewImage(this)" class="upload-btn" multiple/>
            </div>
			   <div id="img-show" class="preview-img"></div>
            </div>
            
            <div id="upload-showing" style="color: #f00"></div>
            	<input type="hidden" id="isNeedPhoto" value="${isNeedPhoto}">
            <p class="present">
               <input type="submit" id="submit-details" value="提交信息">
            </p>
        </form>
    </section>
      <div class="mask-layer" id="new-share">
	   <div class="img-remove">
            <p class="affirm-remove">
                <span>确认删除图片?</span>
                <a href="javascript:;" class="img-cancel">取消</a><a href="javascript:;" class="img-affirm">确认</a>
            </p>
        </div>
	  </div>
	<script>
        var a = document.getElementById("audio");
       var img=document.getElementById("img-play");
      function clickA(){
          if(a.paused){
              a.play();
          }else{
              a.pause()
          }
          if(img.src.match("pause")){
              img.src="../img/play.png"
          }else{
              img.src="../img/pause.png"
          }
      }

	   function previewImage(file){
			 var div = document.getElementById('img-show');
            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=imghead>';
                var img = document.getElementById('imghead');
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
				document.getElementById('preview').style.background='url("../img/succeed.png")center center no-repeat';
				 document.getElementById("img-show").style.display='block';
				  document.getElementById("upload-showing").style.display='none';
            }
        }

	  $(function(){
       var heights = window.screen.height+"px";
        document.getElementById("new-share").style.height=heights;
    })
  </script>
</body>
</html>